<!-- page-header -->
<template>
    <div class="page-header">
        <div @click="goPrevPage" title="返回首页" class="back-btn"></div>
        <div v-if="showTime" class="current-time">{{time}}</div>
        <div
        @click="handleClickUser"
        v-if="showUser"
        class="user-info">
        {{userInfo}}
        </div>
        <div v-if="showCount" class="count-info">还有 <span style="color: #2683FF">{{count}}</span> s 返回首页</div>
    </div>
</template>

<script>
import {
    doLoginOut
} from '@/apis';
export default {
    name: 'page-header',
    props: {
        showTime: {
            type: Boolean,
            default: true
        },
        showUser: {
            type: Boolean,
            default: true
        },
        showCount: {
            type: Boolean,
            default: true
        }
    },
    data () {
        return {
            timer: null,
            timer1: null,
            time: null,
            info: '你',
            count: 120
        }
    },
    computed: {
        // 欢迎语 xxx，上午好（下午、晚上好）
        userInfo () {
            let user;
            if (this.$store.state.user) {
                user = this.$store.state.user
            } else if (window.sessionStorage.getItem('user')) {
                user = window.sessionStorage.getItem('user')
            } else {
                user = null;
            }
            let str = user ? `${user}, ${this.info}好` : `${this.info}好`;
            return str
        },
    },
    methods: {
        // 点击返回home页面
        goPrevPage () {
            /*
            if (sessionStorage.getItem('token')) {
                sessionStorage.removeItem('token');
            }
            if (sessionStorage.getItem('user')) {
                sessionStorage.removeItem('user');
            }
            */
            this.$router.push('/home').catch({})
        },

        // 倒计时返回首页
        setCount () {
            if (this.count <= 0) {
                if (sessionStorage.getItem('token')) {
                    sessionStorage.removeItem('token');
                }
                if (sessionStorage.getItem('user')) {
                    sessionStorage.removeItem('user');
                }
                this.$router.push('/home').catch({})
            } else {
                this.count --;
            }
        },

        // 点击用户名
        handleClickUser(){
            this.$confirm('确认要退出登录吗？')
            .then(_ => {
                this.logout();
            })
            .catch(_ => {
                console.log(_)
            });
        },

        // 退出登录
        async logout () {
            try {
                let res = await doLoginOut();
                console.log('退出登录', res);
                let {
                    code,
                    msg
                } = res.data;
                if (code == 200) {
                    this.$store.commit('CLEAR_LOGIN');
                    this.$router.push('/home').catch({});
                } else if (code == -2) {
                    this.$message({
                        type: 'error',
                        message: `${msg}`
                    })
                    this.$store.commit('CLEAR_LOGIN');
                    this.$router.push('/login').catch({});  
                } else {
                    this.$message({
                        type: 'error',
                        message: `${msg}`
                    });
                }
            } catch(e) {
                console.log('退出登录',e)
            }
        },
    },
    created () {
        this.count = 120;
    },
    mounted () {
        this.timer && clearInterval(this.timer);
        this.timer = window.setInterval(() => {
            this.time = this.$time().format('YYYY-MM-DD HH:mm:ss');
            let hour = new Date().getHours();
            if (hour>0 && hour<=12) {
                this.info = '上午'
            } else if (hour>12 && hour<=18) {
                this.info  = '下午'
            } else {
                this.info  = '晚上'
            }
        }, 1000);
        if (this.showCount) {
            this.timer1 = window.setInterval(() => {
                this.setCount();
            }, 1000); 
        }
        this.$once('hook:beforeDestroy',()=>{
            this.timer && clearInterval(this.timer);
            this.timer1 && clearInterval(this.timer1);
            this.timer = null;
            this.timer1 = null;
        })
    }
}
</script>
<style lang='scss' scoped>
.page-header {
    height: 50px;
    width: 100%;
    padding-bottom: 40px;
    overflow: hidden;

    .back-btn {
        width: 44px;
        height: 34px;
        margin-top: 5px;
        margin-right: 90px;
        background: url('../../assets/back.png') no-repeat center center;
        background-size: cover;
        float: left;
        cursor: pointer;
    }

    .current-time {
        line-height: 50px;
        font-size: 36px;
        color: #2683FF;
        letter-spacing: 0;
        font-weight: 600;
        float: left;
    }

    .user-info {
        line-height: 50px;
        font-size: 36px;
        color: #FFFFFF;
        letter-spacing: 0;
        font-weight: 400;
        float: right;
        cursor: pointer;
    }

    .count-info {
        line-height: 50px;
        font-size: 36px;
        color: #fff;
        float: right;
        margin-right: 140px;
    }


}

</style>